<template>
  <div>
    <ul class="bottom_nav">
      <li>

        <router-link to="/home"><i class="iconfont ">&#xe7a0;</i>首页</router-link>
      </li>
      <li>
        <router-link to="/fit"><i class="iconfont ">&#xe883;</i>健身</router-link>
      </li>
      <li>
        <router-link to="/find"><i class="iconfont ">&#xe681;</i>发现</router-link>
      </li>
      <li>
        <router-link to="/my"><i class="iconfont ">&#xe61a;</i>我的</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "BottomNav",
    data(){
      return{
        home:require('../assets/imgs/home.png')
      }
    }
  }
</script>

<style scoped lang="less">
  .bottom_nav {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #181818;
      li{
        position: relative;
        a{
          /*color: #FEDA05;*/
          color: #8c8c8c;
          i{
            font-size: 22px;
            position: absolute;
            top: -20px;
          }
          position: absolute;
          bottom: -12px;
          left: 40px;
          font-size: 12px;
        }

        float: left;
        font-size: 16px;
        width: 25%;
        height: 50px;
        text-align: center;
        line-height:50px ;
      }

  }

  .router-link-active {
    color: #FEDA05!important;
  }
</style>
